// 品牌详情页面内部的列表
<template>
  <div>
    <div class="screenNav">
      <span
        v-for="(item,index) in listtitle"
        :key="item.id"
        :class="index == indexs ? 'active' : '' "
        @click="changesNav(index,item)"
      >
        {{ item.name }}
        <i class="el-icon-sort" v-if="index !== 0"></i>
      </span>
    </div>
    <!-- <router-link
          target="_blank"
          v-for="item in this.$store.state.productListfloor.data"
          :key="item.id"
          class="goods"
          :to="{name:'productDetails',params:{id:item.id,pid:item.goods_id,item:item}, query:{id:item.id,pid:item.goods_id,item:item}}"
        > -->
    <ol>
      <li v-for="item in goodsList" :key="item.id">
        <img v-lazyload="item.goods_logo" src="@/assets/logo/loading.png" />
        <!-- <img :src="item.goods_logo"> -->
        <div>
          <bdi>{{ item.goods_title }}</bdi>
          <span>订货编码：{{ item.id }}-{{item.goods_id}}</span>
        </div>
        <i>￥{{ item.selling_price }}/个</i>
        <del>￥ {{ item.market_price }}</del>
        <bdi class="xianhuo">现货</bdi>
        <router-link
          target="_blank"
          :to="{name:'productDetails',params:{id:item.id,pid:item.goods_id,item:item}, query:{id:item.id,pid:item.goods_id,item:item}}"
        >
        <el-button type="primary" size="mini">查看详情</el-button>
        </router-link>
        <!-- <el-button type="primary" @click="jumpDetails(item.id,item.goods_id,item)" size="mini">查看详情</el-button> -->
      </li>
    </ol>

    <el-pagination
      background
      layout="prev, pager, next"
      @current-change="currentPage"
      :page-size="10"
      :current-page.sync="current_page"
      :total="total"
    ></el-pagination>
  </div>
</template>
<script>
export default {
  name: "brandLists",
  props: ["page", "goodsList", "total", "current_page"],
  // 状态码     200综合    300销量由低到高    400销量由高到低    500价格由低到高    600价格由高到低
  data() {
    return {
      count2: false,
      count3: false,
      listtitle: [
        {
          name: "默认",
          id: 200
        },
        {
          name: "销量",
          id: 300
        },
        {
          name: "价格",
          id: 500
        }
      ],
      indexs: 0, // 下角标
      lists: [
        {
          imgsrc:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539326274656&di=311ea0b1680504e729f27550ff7b6064&imgtype=0&src=http%3A%2F%2Fp0.ifengimg.com%2Fpmop%2F2017%2F0821%2F30540D969C48B1573CFA173F000E9A6763488274_size169_w1080_h1080.jpeg",
          name: "定位销产品名称SUS304",
          model: "xxxxxxxxxxxxxx",
          orderNum: "xxxxxxxxxxxxxx",
          price: "35.00",
          oldPrice: "350.00",
          GoodsInStock: "现货",
          num: 1,
          id: 0
        },
        {
          imgsrc:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2244985707,382098617&fm=15&gp=0.jpg",
          name: "定位销产品名称SUS304",
          model: "xxxxxxxxxxxxxx",
          orderNum: "xxxxxxxxxxxxxx",
          price: "35.00",
          oldPrice: "350.00",
          GoodsInStock: "现货",
          num: 1,
          id: 1
        },
        {
          imgsrc:
            "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2621881807,1425292707&fm=26&gp=0.jpg",
          name: "定位销产品名称SUS304",
          model: "xxxxxxxxxxxxxx",
          orderNum: "xxxxxxxxxxxxxx",
          price: "35.00",
          oldPrice: "350.00",
          GoodsInStock: "现货",
          num: 1,
          id: 2
        },
        {
          imgsrc:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539326453006&di=a80a3dfeaf6ba8cc9f9e8d14da85a837&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fbaike%2Fpic%2Fitem%2Fdc854fdabec5bc9ab6fd48f4.jpg",
          name: "定位销产品名称SUS304",
          model: "xxxxxxxxxxxxxx",
          orderNum: "xxxxxxxxxxxxxx",
          price: "35.00",
          oldPrice: "350.00",
          GoodsInStock: "现货",
          num: 1,
          id: 3
        },
        {
          imgsrc:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539326274656&di=311ea0b1680504e729f27550ff7b6064&imgtype=0&src=http%3A%2F%2Fp0.ifengimg.com%2Fpmop%2F2017%2F0821%2F30540D969C48B1573CFA173F000E9A6763488274_size169_w1080_h1080.jpeg",
          name: "定位销产品名称SUS304",
          model: "xxxxxxxxxxxxxx",
          orderNum: "xxxxxxxxxxxxxx",
          price: "35.00",
          oldPrice: "350.00",
          GoodsInStock: "现货",
          num: 1,
          id: 4
        },
        {
          imgsrc:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539326274656&di=311ea0b1680504e729f27550ff7b6064&imgtype=0&src=http%3A%2F%2Fp0.ifengimg.com%2Fpmop%2F2017%2F0821%2F30540D969C48B1573CFA173F000E9A6763488274_size169_w1080_h1080.jpeg",
          name: "定位销产品名称SUS304",
          model: "xxxxxxxxxxxxxx",
          orderNum: "xxxxxxxxxxxxxx",
          price: "35.00",
          oldPrice: "350.00",
          GoodsInStock: "现货",
          num: 1,
          id: 5
        },
        {
          imgsrc:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539326274656&di=311ea0b1680504e729f27550ff7b6064&imgtype=0&src=http%3A%2F%2Fp0.ifengimg.com%2Fpmop%2F2017%2F0821%2F30540D969C48B1573CFA173F000E9A6763488274_size169_w1080_h1080.jpeg",
          name: "定位销产品名称SUS304",
          model: "xxxxxxxxxxxxxx",
          orderNum: "xxxxxxxxxxxxxx",
          price: "35.00",
          oldPrice: "350.00",
          GoodsInStock: "现货",
          num: 1,
          id: 6
        },
        {
          imgsrc:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539326274656&di=311ea0b1680504e729f27550ff7b6064&imgtype=0&src=http%3A%2F%2Fp0.ifengimg.com%2Fpmop%2F2017%2F0821%2F30540D969C48B1573CFA173F000E9A6763488274_size169_w1080_h1080.jpeg",
          name: "定位销产品名称SUS304",
          model: "xxxxxxxxxxxxxx",
          orderNum: "xxxxxxxxxxxxxx",
          price: "35.00",
          oldPrice: "350.00",
          GoodsInStock: "现货",
          num: 1,
          id: 7
        },
        {
          imgsrc:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539326274656&di=311ea0b1680504e729f27550ff7b6064&imgtype=0&src=http%3A%2F%2Fp0.ifengimg.com%2Fpmop%2F2017%2F0821%2F30540D969C48B1573CFA173F000E9A6763488274_size169_w1080_h1080.jpeg",
          name: "定位销产品名称SUS304",
          model: "xxxxxxxxxxxxxx",
          orderNum: "xxxxxxxxxxxxxx",
          price: "35.00",
          oldPrice: "350.00",
          GoodsInStock: "现货",
          num: 1,
          id: 8
        },
        {
          imgsrc:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539326274656&di=311ea0b1680504e729f27550ff7b6064&imgtype=0&src=http%3A%2F%2Fp0.ifengimg.com%2Fpmop%2F2017%2F0821%2F30540D969C48B1573CFA173F000E9A6763488274_size169_w1080_h1080.jpeg",
          name: "定位销产品名称SUS304",
          model: "xxxxxxxxxxxxxx",
          orderNum: "xxxxxxxxxxxxxx",
          price: "35.00",
          oldPrice: "350.00",
          GoodsInStock: "现货",
          num: 1,
          id: 9
        }
      ]
    };
  },
  computed: {
    pages() {
      return this.page;
    }
  },

  methods: {
    // 分页
    currentPage(page) {
      this.$emit("pagesChange", page);
      document.documentElement.scrollTop = 0;
    },
    // 查看详情
    jumpDetails(id, pid, item) {
      this.$router.push({
        name: "productDetails",
        params: {
          id,
          pid,
          item
        }
      });
    },

    // 筛选
    changesNav(index, item) {
      this.indexs = index;
      switch (index) {
        case 0:
          this.$emit("changeScreen", { index });
          break;
        case 1:
          this.count2 = !this.count2;
          this.$emit("changeScreen", { index, count: this.count2 });
          break;
        case 2:
          this.count3 = !this.count3;
          this.$emit("changeScreen", { index, count: this.count3 });
          break;
      }
    }

    // 计数器点击计数
    // handleChange(value) {
    //   console.log(value)
    // }
  },
  mounted() {
    console.log(this.goodsList);
  }
};
</script>
<style lang="scss" scoped>
.screenNav {
  width: 100%;
  height: 40px;
  background: #f0f0f0;
  span {
    line-height: 26px;
    padding: 0 10px;
    cursor: pointer;
    margin-top: 7px;
    display: inline-block;
    margin-right: 20px;
    &:first-child {
      margin-left: 35px;
    }
    &:hover {
      color: #ff0000;
    }
  }
  .active {
    color: #fff;
    background: #ff9000;
  }
}
ol {
  li {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgb(241, 241, 241);
    img {
      width: 80px;
      height: 80px;
      border: 1px solid #e4e4e4;
      margin: 15px;
      margin-right: 50px;
      margin-left: 40px;
    }
    div {
      width: 340px;
      span {
        display: block;
        color: #afaeae;
        font-size: 12px;
        line-height: 24px;
      }
      bdi {
        display: block;
      }
    }
    i {
      width: 140px;
      color: #ff0000;
      text-align: center;
      font-weight: bold;
      font-size: 16px;
    }
    del {
      color: #afaeae;
      width: 112px;
      text-align: center;
      font-size: 12px;
    }
    .xianhuo {
      text-align: center;
      width: 239px;
    }
    .el-input-number {
      width: 80px;
    }
    .el-button {
      margin-left: 20px;
    }
  }
}
/deep/ .el-pagination {
  margin: 25px 0px;
  text-align: center;
}
</style>
